<%@ page isELIgnored ="false" pageEncoding="UTF-8" %> 
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>

<?xml version='1.0' encoding='UTF-8'?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Jardin ZEN - Plantas VS Zombies</title>
		<link rel="shortcut icon" href="plantas/Peashooter.png" />
		<link rel="stylesheet" type="text/css" href="jardinzen.css" />
	</head>

	<body>
		<c:set var="juego"  value="${sessionScope.juego}"/>
		<c:set var="jardinZen" value="${sessionScope.jardinZen}"/>
		
		<a href="index.jsp"><img id="logo" src="splash.png"/></a>
		
		<div id="title">
			<h1>Jardin ZEN</h1>
			
			<h3 id="typeJardin">${jardinZen.getType()}</h3>
			<h3>Puntos: ${juego.getUsuario().getPuntos()}</h3>
		</div>
		
		<div id="barraSuperior">
			<form class="superior" method="get" action="cambiarJardin">
				<input type="submit" value="Ir al otro Jardin Zen"/>
			</form>
			
			<form class="superior" method="get" action="search">
				<input type="text" class="left" name="planta" value="${param.planta}" autofocus/>
				
				<div class="left">
					<input type="radio" name="orden" value="1" checked/> De menor a MAYOR <br/>
					<input type="radio" name="orden" value="-1"/> De MAYOR a menor <br/>
				</div>
				
				<div class="left">
					<input type="radio" name="propiedad" value="nombre" checked/> Por nombre <br/>
					<input type="radio" name="propiedad" value="ataque"/> Por ataque <br/>
					<input type="radio" name="propiedad" value="defensa"/> Por defensa <br/>
				</div>
				
				<input type="submit" value="Buscar"/>
			</form>
		</div>

		<c:if test="${requestScope.plantas != null}" >
		
			<div class="resultadoPlantas">
				
				<c:forEach items="${requestScope.plantas}" var="planta" varStatus="status">
					<div class="plantaResultado">
						<img class="imgPlanta" src="plantas/${planta.nombre}.png"/>
						
						<div class="infoPlanta">
							<p class="nombrePlanta"> ${planta.nombre} </p>
							<p class="ptsPlanta"> ${planta.puntosAtaque} ATK - ${planta.puntosDefensa} DEF </p>
							
							<form method="get" action="mejorarPlanta">
								<input type="hidden" value="${param.planta}" name="busqueda"/>
								<input type="hidden" value="${planta.nombre}" name="planta"/>
   								<input id="buttonMejorar" type="submit" value="Mejorar"/>
							</form>
						</div>
						
					</div>
				</c:forEach>
			</div>
		</c:if>
		
	</body>
</html>

